<script lang="ts" setup>
import {searchTeacher} from '@/api/teacher';
import type {Chapter} from '@/types/request';
import {addProduct} from '@/api/product';
import {message} from 'ant-design-vue';

// 步骤条索引
let current = $ref(0)

// 创建课程初始参数
let formState = $ref({
    title: '',
    summary: '',
    detail: '',
    teacher_id: '',
    hour: '',
    amount: undefined,
    old_amount: undefined,
    bd_zip_url: '',
    note_url: '',
})

/**
 * 步骤一
 */
// 讲师列表初始参数
let teachers = $ref<any>([])
// 获取讲师列表
onMounted(async () => {
    const {data: _teachers} = await searchTeacher({page: 1, size: 999})
    teachers = _teachers.current_data
})


/**
 * 步骤二
 */
let chapters = $ref<Chapter[]>([])


/**
 * 步骤三
 */
let cover_img = $ref<File>()

async function handleComplete() {
    function reset() {
        current = 0
        formState = {
            title: '',
            summary: '',
            detail: '',
            teacher_id: '',
            hour: '',
            amount: undefined,
            old_amount: undefined,
            bd_zip_url: '',
            note_url: '',
        }
        cover_img = undefined
        chapters = []
    }

    const {code} = await addProduct({
        new_details: formState,
        cover_img: cover_img!,
        chapters: chapters
    })

    if (code === 0) {
        message.success('创建成功')
        reset()
    }
}
</script>

<template>
    <div>
        <a-steps :current="current">
            <a-step title="填写课程基本信息"/>
            <a-step title="创建课程大纲"/>
            <a-step title="发布课程"/>
        </a-steps>

        <div m="x-30 t-11 b-8">
            <AddProductBaseInfo :teachers="teachers" :form-state="formState" v-model:current="current"
                                v-show="current === 0"/>
            <AddProductOutline v-model:chapters="chapters" v-model:current="current" v-show="current === 1"/>
            <AddProductPublish v-model:current="current" v-show="current === 2"
                               @update:image="(img: File) => cover_img = img"
                               @complete="handleComplete"/>
        </div>
    </div>
</template>

<style>
.ant-steps-item-container {
    display: flex;
}

.ant-steps-item-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ant-steps-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>